<template>
	<view class="page" :style="{ backgroundImage: `url(${static}head.png)`}">
		<image class="back" @tap="goPrePage" src="https://nx-hb-k12-test.oss-cn-hangzhou.aliyuncs.com/goods_detail/202312/20231207193009_65713c4184e55.png" mode=""></image>
		<view class="content">
			<view class="inner">
				<view class="fufei" v-if="obj.is_pay == 1">
					付费活动
				</view>
				<view class="item">
					<view class="item-i head">活动主题</view>
					<view class="item-i">{{obj.title}}</view>
				</view>
				<view class="item">
					<view class="item-i head">活动时间</view>
					<view class="item-i" v-if="obj.start_time">{{$ft.fomartTime(obj.start_time).day}}  {{$ft.fomartTime(obj.start_time).time}} ~ {{$ft.fomartTime(obj.end_time).time}}</view>
				</view>
				<view class="item">
					<view class="item-i head">活动地点</view>
					<view class="item-i">{{obj.address}}</view>
				</view>
				<view class="item">
					<view class="item-i head">主讲嘉宾</view>
					<view class="item-i">{{obj.master_teacher}}</view>
				</view>
				<view class="item">
					<view class="item-i head">预约姓名</view>
					<view class="item-i" v-if="obj.join_id < 1">
						<input type="text" placeholder="请输入" value="" placeholder-class="plcst"  v-model="name"/>
					</view>
					<view class="item-i" v-if="obj.join_id > 0">
						{{obj.username}}
					</view>
				</view>
				<view class="item">
					<view class="item-i head">联系电话</view>
					<view class="item-i" style="height: 32rpx;">
						{{obj.mobile}}
						<!-- <input type="text" placeholder="请输入" value="" v-model="name"/> -->
					</view>
				</view>
			</view>
			<view class="bottomBtn" @tap="make" v-if="obj.join_id < 1">
				立即预约
			</view>
			<button open-type="getPhoneNumber" v-if="!login" class="loginbtn" @getphonenumber="getPhoneNumber">
				一键获取手机号预约
			</button>
			<!-- <view class="bottomBtn disable" v-show="type == 2">
			    本场活动已约满
			</view> -->
			<view class="bottomBtn have" v-if="obj.join_id > 0">
			    <view class="itemBtn">预约号:{{obj.code}}</view>
				<view class="itemBtn qvBtn" @tap="qvYuyue">取消预约</view>
			</view>
		</view>
	</view>
</template>

<script>
	import BASE_URL from '@/util/path.js';
	export default {
		data() {
			return {
				type:3,
				name:"",
				login:false,
				ready:true,
				static:BASE_URL.occStatic,
				id:'',
				scene:false,
				obj:{}
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {
				// 来自页面内转发按钮
				console.log(res.target)
			}
			return {
				title: '“书香长江”阅读周活动预约',
				path: '/pages/detail/detail?id=' + this.id + '&share=1',
				imageUrl: ''
			}
		},
		
		onShareTimeline(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: '“书香长江”阅读周活动预约',
		      path: '/pages/detail/detail?id=' + this.id + '&share=1'
		    }
		  },
		

		onLoad(option) {
           const id = option.id ? option.id : option.scene;
		   this.id = id;
		  const token = uni.getStorageSync('access_token');
		  console.log(token);
		  if(token) {
		  	this.login = true
		  }
		  if(option.scene) {
			  this.scene = true;
		  }
		  if(option.share) {
		  	  this.scene = true;
		  }
		   this.getDetail();
		},
		methods: {
			getPhoneNumber(e) {
				const _this = this
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					console.log(e);
					const {
						code,
						encryptedData,
						iv
					} = e.detail;
					uni.login({
						provider: 'weixin',
						success: function  (res) {
						// 登录成功，获取到用户信息
						// console.log(res.errMsg)
						if(_this.ready = false) {
							return
						}
						   _this.ready = false;
						   // console.log('code',res.code)
						   _this.local_login({
							   code,
							   encryptedData,
							   iv,
							   code:res.code
						   })
							
						// TODO: 根据实际需求进行后续操作，如获取用户信息、跳转到其他页面等。
					}
				})
			 }
			},
			local_login(obj) {
				uni.showLoading({
					icon:'none'
				})
				const  _this = this;
				uni.request({
					url: BASE_URL.wy + 'api/auth/wx_verify',
					header: {
						'Content-Type': 'application/json'
					},
					method: 'post',
					data:{code:obj.code},
					success: (res) => {
						uni.hideLoading();
						// console.log(res);
						const {
							status,
							data,
							msg
						} = res.data;
						
						if (status == 200) {
							const post_data = {
								...obj,
								...res.data.data,
								nickname:''
							}
							_this.weixinLogin(post_data)
							// console.log(post_data);
							uni.hideLoading()
						} else {
							uni.showToast({
								icon: 'none',
								title: msg + '/auth/wx_verify'
							})
							return
						}
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			weixinLogin (obj) {
				const _this = this;
				uni.showLoading({
					icon:'none'
				})
				uni.request({
					url: BASE_URL.wy + 'api/auth/login_wx',
					header: {
						'Content-Type': 'application/json'
					},
					method: 'post',
					data:obj,
					success: (res) => {
						uni.hideLoading();
						// console.log(res);
						const {
							status,
							data,
							msg
						} = res.data;
						
						if (status == 200) {
							console.log('data',data);
							// uni.setStorageSync('access_token',data.access_token);
							uni.setStorage({
								key: 'access_token',
								data: data.access_token,
								success: function () {
									//console.log('success');
									  _this.login = true;
									 _this.ready = true;
									_this.getDetail();
								}
							});
							// uni.navigateTo({
							// 	url:'/pages/list/list'
							// })
							// _this.weixinLogin(post_data)
							// console.log(post_data);
							uni.hideLoading()
						} else {
							uni.showToast({
								icon: 'none',
								title: msg + '/auth/login_wx'
							})
							return
						}
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			async getDetail() {
				const res = await this.$http({
					url:'api/activity/info/' + this.id,
					method:"get",
					data:{}
				})
				//console.log(res);
				this.obj = res.data;
				console.log(this.obj)
			},
			async make(){
				if(!this.name) {
				  uni.showToast({
				  	title:"请填写姓名",
					icon:'none'
				  })
				  return
				}
				
				const res = await this.$http({
					url:'api/activity/join/',
					method:"post",
					data:{
						username:this.name,
						id:this.id
					}
				})
				if(res.data) {
					uni.showToast({
						title:'预约成功！',
						icon:'none'
					})
				}
				// this.obj.join_id = 1;
				// this.obj.code = res.data.code;
				// this.obj.join_id = res.data.join_id;
				this.getDetail();
			},
			async qvYuyue() {
				const _this = this;
				const res = await this.$http({
					url:'api/activity/cancel',
					method:"post",
					data:{
						username:this.name,
						id:_this.obj.join_id
					}
				})
				if(res.data) {
					uni.showToast({
						title:'取消预约成功！',
						icon:'none'
					})
					// debugger;
					this.obj.join_id = 0;
				}
			},
			 goBoming() {
				 uni.navigateTo({
				 	url: '/pages/list/list'
				 })
			 },
			 goPrePage() {
				 if(this.scene) {
					 uni.reLaunch({
					 	url:"/pages/index/index"
					 })
				 } else {
					 uni.navigateBack()
				 }
				 
			 }
		}
	}
</script>

<style lang='scss'>
	@function px($col) {
	  @return $col / 1.44 + rpx;
	}

    .plcst {
		color:#d84f04;
	}
	.page {
		width: 100%;
		min-height: 100%;
		background-size: 100% auto;
		background-repeat: no-repeat;
		padding-top: 582rpx;
		padding-bottom: 160rpx;
		background-color: #f6f6f6;
		position: relative;
		.back {
			left: 38rpx;
			top: 87rpx;
			position: fixed;
			width: 58rpx;
			height: 58rpx;
			z-index: 9999;
		}
	}
	.fufei {
		position: absolute;
		right: 0;
		top:0;
		background-color: #fd9138;
		color:#fff;
		width: 160rpx;
		height: 65rpx;
		font-weight: bold;
		font-size: 30rpx;
		border-radius:  0 32rpx 0 32rpx;
		@include center();
	}
	.content {
		width: 100%;
		justify-content: space-between;
		padding:0 px(45);
		.inner {
			background-color: #fff;
			border-radius: 32rpx;
			overflow: hidden;
			padding:px(35) px(56);
			position: relative;
			.item {
				color:#333333;
				border-bottom: 1px solid #e2e2e2;
				padding-top: 35rpx;
				padding-bottom: 15rpx;
				font-size: 32rpx;
				
				.item-i {
					margin-bottom: 20rpx;
					font-weight: normal;
					&.head {
						font-weight: bold;
					}
					
				}
			}
		}
	}
	
	.loginbtn {
		position: fixed;
		height: px(170);
		width: 100%;
		left: 0;
		right: 0;
		bottom:0;
		z-index: 999;
		color:#fff;
		z-index: 99999;
		/* background-color: red; */
		background-color: #1080b2 !important;
		@include center();
	}
    .bottomBtn {
		position: fixed;
		height: px(170);
		width: 100%;
		left: 0;
		right: 0;
		bottom:0;
	    z-index: 999;
		color:#fff;
		font-weight: bold;
		background-color: #1080b2;
		/* background-color: #fff; */
		&.disable {
			background-color: #c3c3c3;
			color:#fff;
		}
		&.have {
			display: flex;
			.itemBtn {
				width: 50%;
				background-color: #fff;
				height: 100%;
				color:#474747;
				&.qvBtn {
					background-color: #d84f04;
					color:#fff;
				}
				@include center();
			}
			
		}
		@include center();
	}
</style>
